<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../layui/font/iconfont.woff">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #addbtn {
            margin: 1%;
        }

        #test1 {
            float: right;
        }

        .hide {
            display: none;
        }

        .c1 {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.3;
            z-index: 9;
        }

        .c2 {
            padding: 25px 0 0 0;
            background-color: white;
            /* border: 1px solid black; */
            position: fixed;
            width: 450px;
            height: 380px;
            font-size: 20px;
            text-align: center;
            border-radius: 10px;
            top: calc(50% - 200px);
            left: calc(50% - 225px);
            z-index: 10;
        }

        .c2 h3 {
            padding: 0 0 20px 0;
            text-align: center;
        }

        .storeimg {
            width: 50px;
            height: 50px;
        }

        #divPage {
            font-size: 18px;
            font-weight: 100;
            float: right;
            width: 15%;
            height: 10%;
        }

        .aa {
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            background-color: white;
            border-radius: 3px;
            padding: 0 8px;
            cursor: pointer;
        }

        .theads {
            width: 80%;
            height: 100%;
            margin-left: calc(50%-40%);
        }

        .c2 input {
            border-radius: 5px;
            font-size: 18px;
            margin: 0 auto;
        }

        .btna {
            text-align: center;
            /* border: 1px solid black; */
        }

        #tubiaofont {
            height: 60px;
            background-color: rgb(240, 244, 246);
        }

        #tubiaofont span {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }

        #tanchukuang {
            width: 100%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
        }

        #popup_box {
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }

        #popup_box>p {
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }

        td {
            height: 50px;
            line-height: 50px !important;
        }
    </style>
</head>

<body>
    <div id="tanchukuang">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>品牌</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>品牌管理</span>
        </div>
        <div id="popup_box">
            <p>品牌列表 </p>
            <button id="addbtn" class="layui-btn glyphicon glyphicon-plus"
                onClick="window.location.href='../html/storetianjia.html';">添加品牌</button>
            <div class="layui-form">
                <table class="layui-hide" id="test">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
            </div>
            <div class="layui-col-md2 layui-col-md-offset9">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-default glyphicon glyphicon-search" type="button"></button>
                    </span>
                </div>
            </div>
        </div>
        <thead class="theads">
            <tr>
                <th>id</th>
                <th>品牌名称</th>
                <th>品牌类型</th>
                <th>官网地址</th>
                <th>精选品牌</th>
                <th>是否禁用</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="userTable">
        </tbody>
        </table>
        <div id="i1" class="c1 hide"></div>
        <div id="i2" class="c2 hide">
            <h3>修改品牌信息</h3>
            <p>品牌名称: <input type="text" class="managementname"></p>
            <p>品牌类型: <input type="text" class="leixing"></p>
            <p>官网地址: <input type="text" class="guangwangip"></p>
            <p>精选品牌: <input type="text" class="jingxuan"></p>
            <p>是否禁用: <input type="text" class="jinyong"></p>
            <div class="btna">
                <p><input type="button" value="取消" class="layui-btn layui-btn-sm" onclick="hide();" />
                    <input type="button" value="确定" class="layui-btn layui-btn-sm save"
                        style="background-color: white;  border: 1px solid black; color: black ;" onclick="hide();" />
                </p>
            </div>
        </div>
    </div>

    <!-- 生成分页 -->
    <div id="divPage">&lt;<span id="lr"></span>&gt;</div>
    </div>
    <script src="../js/jQuery.3.6.0-uncompress.js"></script>
    <script src="../js/database.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script type="text/javascript">
         
        // //渲染
        // function xuanran(management) {
        //     let start = (currentPage - 1) * pageSize;
        //     let end = currentPage * pageSize;

        //     $('#userTable').empty()
        //     for (var i = start; i < end && i < management.length; i++) {
        //         tr = `
        //         <tr>
        //         <td>${i + 1}</td>
        //         <td>${management[i].managementname}</td>
        //         <td>${management[i].leixing}</td>
        //         <td>${management[i].guangwangip}</td>
        //         <td>${management[i].jingxuan}</td>
        //         <td>${management[i].jinyong}</td>
        //         <td >
        //             <!-- 修改图标 -->
        //             <button data-id="${management[i].id}" type="button" class="layui-btn layui-btn-sm xiugai" onclick="show();"><i class="layui-icon"></i></button>
        //             <!-- 删除图标 -->
        //             <button data-id="${management[i].id}" type="button" class="cc layui-btn layui-btn-normal layui-btn-sm " style="background-color: red;">
        //                 <i class="layui-icon"></i></button>
        //         </td>
        //     </tr>
        //     `
        //         $('#userTable').append(tr)
        //     }
        // }

        // let pageSize = 5;//每页显示条数
        // let currentPage = 1;//当前页
        // let TotalPage;
        // BindPage();
        // //页数
        // function BindPage() {
        //     TotalPage = Math.ceil(management.length / pageSize);
        //     // currentPage=currentPage>TotalPage?TotalPage:currentPage
        //     if (currentPage > TotalPage) {
        //         currentPage = TotalPage;
        //     }
        //     if (TotalPage == 0) {
        //         currentPage = 1;
        //     }
        //     //生成对应页码
        //     $("#divPage").html("")
        //     for (var i = 1; i <= TotalPage; i++) {
        //         $("#divPage").append(`<a class="aa">${i}</a>`)
        //     }
        // }
        AddPageEvent()
        function AddPageEvent() {
            $("#divPage").on("click", "a", function () {
                currentPage = parseInt($(this).text());
                // xuanran();
            })
        }
        //添加


        //删除
        $("#userTable").on("click", ".cc", function () {
            let id = $(this).attr("data-id")
            console.log(id);
            layer.confirm(
                "确认删除？",
                {
                    title: "删除",
                    btn: ["确认", "取消"],
                },
                function () {
                    let newshanchu = management.filter(function (item) {
                        return item.id != id;
                    });
                    management = newshanchu;
                    BindPage();
                    console.log(management);
                    xuanran(management);
                    layer.msg("已删除", { icon: 1, time: 500 });
                },
                function () {
                    layer.msg("已取消", { icon: 2, time: 500 });
                }
            );
        });
        //编辑
        $('#userTable').on('click', '.xiugai', function () {
            let id = $(this).attr('data-id');
            var obj = management.find(v => v.id == id);
            $(".managementname").val(obj.managementname);
            $(".leixing").val(obj.leixing);
            $(".guangwangip").val(obj.guangwangip);
            $(".jingxuan").val(obj.jingxuan);
            $(".jinyong").val(obj.jinyong);
            $('.save').on('click', function () {
                var managementname = $('.managementname').val();
                var leixing = $('.leixing').val();
                var guangwangip = $('.guangwangip').val();
                var jingxuan = $('.jingxuan').val();
                var jinyong = $('.jinyong').val();
                for (var i = 0; i < management.length; i++) {
                    if (id == management[i].id) {
                        management[i].managementname = managementname;
                        management[i].leixing = leixing;
                        management[i].guangwangip = guangwangip;
                        management[i].jingxuan = jingxuan;
                        management[i].jinyong = jinyong;
                        $('input:text').val("");
                        layer.msg("修改成功！", { icon: 1, time: 500 });
                        $(".save").off('click');
                        xuanran(management);
                    }
                }
            })
        })
        xuanran(management);

        //模态框显示与隐藏
        function show() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function hide() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }


    </script>
</body>

</html>